<template id='MonkeyWorking'>
  <div class="MonkeyWorking">
    <div class="operation">
      <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div>
    </div>
    <div class="btns">
      <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "MonkeyWorking",
  components: {},
  // 定义属性
  data() {
    return {
      tabList: [
        { id: 1, name: "工作" },
        { id: 2, name: "列表" },
      ],
      isClick: 2,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.MonkeyWorking {
  user-select: none;
  margin-top: 188px;
  text-shadow: 0px 3px rgba(0, 0, 0, 0.6);
  position: relative;
  .operation {
    display: flex;
    position: absolute;
    top: -68px;
    z-index: 9;
    .tab {
      background-image: url("../../../assets/images/game/myMonkey/tab.png");
      background-size: 100% 100%;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      //   margin-top: -72px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      -webkit-animation: swing-in-top-fwd 1s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
      animation: swing-in-top-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s
        both;
      @-webkit-keyframes swing-in-top-fwd {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      @keyframes swing-in-top-fwd {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      span {
        margin-top: 10px;
        font-size: 30px;
        position: relative;
        cursor: pointer;
      }
      .isChose {
        -webkit-animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        @-webkit-keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
        @keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
      }
      .isClick {
        position: absolute;
        bottom: -10px;
        left: -10%;
        width: 120%;
        height: 6px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0px 2px 0px 0px #000000;
        -webkit-animation: scale-up-hor-center 0.25s
          cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: scale-up-hor-center 0.25s cubic-bezier(0.39, 0.575, 0.565, 1)
          0.5s both;
        @-webkit-keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        @keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
      }
    }
  }
  .btns {
    opacity: 0.5;
    position: absolute;
    z-index: 12;
    .tab {
      opacity: 0;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      margin-top: -68px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      span {
        cursor: pointer;
        margin-top: 5px;
        font-size: 30px;
      }
    }
  }
}
</style>